<template>
    <div style="padding-right: 10%;padding-left: 10%;padding-bottom: 20px;padding-top: 20px">
        <div style="font-size: xx-large;font-weight: bold;padding: 20px 20px" align="center">W E C S 资源控制台</div>
        <el-collapse v-model="activeNames" accordion @change="handleChange">
            <el-collapse-item name="userGroup" v-if="userGroupShow">
                <template slot="title">
                    <img src="../../assets/gc.png"/>
                    <span style="font-size: x-large">用户中心</span>
                </template>
                <UserGroupInfo :userGroup="userGroup"></UserGroupInfo>
            </el-collapse-item>
            <el-collapse-item name="category" v-if="categoryShow">
                <template slot="title">
                    <img src="../../assets/gc.png"/>
                    <span style="font-size: x-large">资源管理</span>
                </template>
                <CategoryTable :categories="categories" v-on:reShow="changeShow"></CategoryTable>
            </el-collapse-item>
            <el-collapse-item name="tools" v-if="categoryShow">
                <template slot="title">
                    <img src="../../assets/gc.png"/>
                    <span style="font-size: x-large">辅助工具</span>
                </template>
                <WTools></WTools>
            </el-collapse-item>
        </el-collapse>

    </div>
</template>

<script>

    import {getPageDataServer} from '../../services'
    import UserGroupInfo from "./UserGroupInfo";
    import CategoryTable from "./CategoryTable";
    import WTools from "./WTools";

    export default {
        name: "ManagerTable",
        components: {WTools, CategoryTable, UserGroupInfo},
        data() {
            return {
                userGroupShow: true,
                categoryShow: true,
                category: {},
                dialogFormVisible: false,
                activeNames: "category",
                userGroup: {},
                user: {},
                categories: [{
                    category: {},
                    sources: [],
                    sourcesCount: 0,
                }],
            }
        }, created() {
            this.getPageData();
        }, methods: {

            changeShow(showType) {
                if (showType === 'categoryShow') {
                    // console.log("categoryShow")
                    this.categoryShow = false;
                    this.getPageData();
                } else if (showType === 'userGroupShow') {
                    console.log("userGroupShow")
                }
            },

            handleChange(val) {
                // console.log(val);
                if (val === 'categoryShow') {
                    this.categoryShow = false;
                    this.categoryShow = true;
                } else if (val === 'userGroup') {
                    this.userGroupShow = false;
                    this.userGroupShow = true;
                }
            },
            getPageData() {
                //清空所有已经渲染的数据
                this.categories = [];
                getPageDataServer().then(res => {
                    // localStorage.removeItem("cNum");
                    const pageData = res.data;
                    localStorage.setItem("cNum", pageData.categoriesCount);
                    this.userGroup = pageData.userGroup
                    this.user = pageData.wecsUser;
                    this.categories = pageData.categories;
                    this.categoryShow = true;
                    this.userGroupShow = true;
                })
            }

        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>